<template>
  <div>
    <router-view />

    <!-- 底部的tarbar -->
    <van-tabbar
      v-model="active"
      active-color="orange"
      :route="true"
      :placeholder="true"
    >
      <van-tabbar-item icon="wap-home-o" to="/home/index">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/home/classify">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/home/cart">
        购物车
      </van-tabbar-item>
      <van-tabbar-item to="/home/mine">
        我的
        <template #icon>
          <span class="iconfont icon-wode"></span>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref } from "vue";
// 按需引入ui组件
// import { Tabbar, TabbarItem } from "vant";
export default {
  // components: {
  //   "van-tabbar": Tabbar,
  //   "van-tabbar-item": TabbarItem,
  // },
  setup() {
    const active = ref(0);
    return { active };
  },
};
</script>

<style lang="less" scoped></style>
